import { NavBar, DatePicker } from "antd-mobile";
import "./index.scss";
import { useMemo, useState } from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import { useSelector } from "react-redux";
import _ from "lodash";
import DailyBill from "./componets/DailyBill";

const Month = () => {
  const billList = useSelector((state) => state.bill.billList);
  const [datePickerVisible, setDatePickerVisible] = useState(false);
  const [contentVisible, setContentVisible] = useState(true);
  const [currentDate, setCurrentDate] = useState(() => {
    return dayjs(new Date()).format("YYYY-MM");
  });
  const monthBillList = useMemo(() => {
    const monthBillGroup = _.groupBy(billList, (bill) =>
      dayjs(bill.date).format("YYYY-MM")
    );
    return monthBillGroup[currentDate] || [];
  }, [billList, currentDate]);
  const billDetail = useMemo(() => {
    const pay = monthBillList.reduce((acc, bill) => {
      if (bill.type === "pay") {
        acc += parseFloat(-bill.money);
      }
      return acc;
    }, 0);

    const income = monthBillList.reduce((acc, bill) => {
      if (bill.type === "income") {
        acc += parseFloat(bill.money);
      }
      return acc;
    }, 0);

    return {
      pay,
      income,
      balance: income - pay,
    };
  }, [monthBillList]);

  const dayBillList = useMemo(() => {
    const dayBillGroup = _.groupBy(monthBillList, (bill) =>
      dayjs(bill.date).format("YYYY-MM-DD")
    );
    const res = [];
    for (const [date, bills] of Object.entries(dayBillGroup)) {
      res.push({
        date,
        id: bills[0].id,
        bills,
      });
    }
    return res;
  }, [monthBillList]);

  const toggleContentVisible = () => {
    setContentVisible((prevState) => !prevState);
  };
  const selectDate = (value) => {
    setCurrentDate(dayjs(value).format("YYYY-MM"));
    setDatePickerVisible(false);
  };
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date">
            <span className="text" onClick={() => setDatePickerVisible(true)}>
              {currentDate}月账单
            </span>
            <span
              className={classNames("arrow", contentVisible && "expand")}
              onClick={toggleContentVisible}
            ></span>
          </div>
          {/* 统计区域 */}
          <div
            className="twoLineOverview"
            style={{ display: !contentVisible && "none" }}
          >
            <div className="item">
              <span className="money">{billDetail.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{billDetail.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{billDetail.balance.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={datePickerVisible}
            max={new Date()}
            onConfirm={selectDate}
            onCancel={() => setDatePickerVisible(false)}
          />
        </div>
        {dayBillList.map(({ date, id, bills }) => {
          return <DailyBill key={id} date={date} bills={bills} />;
        })}
      </div>
    </div>
  );
};

export default Month;
